<template>
  <div style="height: 100%" ref="echart">echart</div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    //父组件传递进来的图标数据
    chartData: {
      type: Object,
      default() {
        return {
          xData: [],
          series: [],
        };
      },
    },
    //是否有坐标轴  通过判断此选项，可以获取是axisOption配置还是normalOption配置
    isAxisChart: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    options() {
      return this.isAxisChart ? this.axisOption : this.normalOption;
    },
  },
  data() {
    return {
      echart: null,
      axisOption: {},
      normalOption: {},
    };
  },
  methods: {
    initChart() {
      this.initChartData();
      if (this.echart) {
        this.echart.setOption(this.options);
      } else {
        this.echart = echarts.init(this.$refs.echart);
        this.echart.setOption(this.options);
      }
    },
    initChartData() {
      if (this.isAxisChart) {
        this.axisOption.xAxis.data = this.chartData.xData;
        this.axisOption.series = this.chartData.series;
      } else {
        this.normalOption.series = this.chartData.series;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>